<template>
  <div class="right">
    <ul>
      <li v-for="(item,index) in MechanismList" :key="index">
        <div class="title">
          <div class="circle">
            <img src="../../../assets/img/mechanism/img_1.png" alt="ha">
          </div>
          <div class="content">
            {{ item.title }}
          </div>
        </div>
        <div class="detail">
          {{ item.detail }}
        </div>
      </li>
    </ul>
    <div class="right-button">
      <button class="understand">了解详细功能</button>
      <button class="application">申请免费试用</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MechanismList: [
        {
          title: "精准高效管理教学事务",
          detail: "一键对接教务系统，精准高效管理师生教学、课程、课务。"
        },
        {
          title: "有效提升教学质量",
          detail: "以课堂教学为核心，以产出为导向；实时监控师生、课程、教学活动等教学过程。"
        },
        {
          title: "教学资产管理",
          detail: "沉淀教学过程资产，促进优质课程、资源、知识图谱建设。"
        },
        {
          title: "智慧校园全景定制",
          detail: "以学生为中心，以教学为导向，提供校园全景智慧教学解决方案。"
        },
      ]
    }
  }
}
</script>

<style scoped>
.right {
  width: 675px;
}

ul {
  list-style-type: none;
}

li {
  margin-bottom: 40px;
}

.title {
  line-height: 36px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.circle {
  width: 25px;
  height: 25px
}

img {
  width: 25px;
  height: 25px
}

.content {
  color: #1f2023;
  font-weight: 600;
  margin-left: 16px;
  font-size: 30px;
}

.detail {
  font-size: 24px;
  margin-top: 20px;
  color: #74787c;
  padding-left: 38px;
  line-height: 32px;
}
.right-button{
  margin: 90px 0 0 38px;
  width: 425px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
button{
  cursor: pointer;
  width: 192px;
  height: 63px;
  text-align: center;
  line-height: 48px;
  border-radius: 4px;
  font-size: 20px;
}
.understand{
  background: #ffffff;
  border: 1px solid #4285f4;
  color: #4285f4;
}
.application{
  background: linear-gradient(131deg,#7eb0ff,#2178ff);
  color: #fff;
  border: white;
}
</style>